<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<html>
<head>
    <base href="<%=basePath%>">
    <title>Title</title>
    <%@include file="../common_css.jsp" %>
</head>
<body>
<script id="toolbar" type="text/html">
    <form action=" " class="layui-form" layui-fluid>
        <form class="layui-form">
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <input type="text" name="series"
                           class="layui-input
					searchVal" placeholder="车系"/>
                </div>
                <a class="layui-btn search_btn" data-type="reload" onclick="setCondition()"><i
                        class="layui-icon">&#xe615;</i> 搜索</a>
            </div>
        </form>

    </form>

    <br/>
    <div class="layui-btn-container">
        <a class="layui-btn layui-btn-normal addNews_btn" lay-event="add" type="button" onclick="Toadd()">
            <i class="layui-icon">&#xe608;</i>
            添加汽车
        </a>
    </div>
</script>

<!--操作-->
<script id="userListBar" type="text/html">
    <a class="layui-btn layui-btn-xs" type="button" onclick="Toedit({{d.id}})">编辑</a>
</script>

<table id="tbl"></table>
<%--<%@include file="../common_js.jsp" %>--%>
<script type="text/javascript">
    var table;
    var jquery;
    layui.use(['table', 'jquery'], function () {
        table = layui.table;
        jquery = layui.jquery;
        table.render({
            id: "tbl",
            elem: "#tbl",
            url: "car/index",
            toolbar: "#toolbar",
            contentType: "application/x-www-form-urlencoded",
            page: "true",
            limit: 5,
            parseData: function (res) {
                return {
                    code: 0,
                    msg: "",
                    data: res.data,
                    count: res.count,
                }

            },
            cols: [[
                {
                    type: 'checkbox'
                },
                {
                    field: "id",
                    title: "编号"
                },
                {
                    field: "series",
                    title: "车系"
                },
                {
                    field: "model",
                    title: "型号"
                },
                {
                    field: "price",
                    title: "价格"
                },
                {
                    title: "操作",
                    templet: "#userListBar"
                }
            ]]
        })
    })

    function setCondition() {
        table.reload('tbl', {
            where: {"series": jquery('[name=series]').val()},
        })

    }

    function Toadd() {
        var index = layer.open({
            type: 2,
            title: "新增车",
            content: "car/add",
            btn: ['添加', '取消'],
            area: ['500px', '300px'],//弹窗的长宽 默认auto时 maxWidth - 最大宽度 maxHeight - 最大高度3
            shadeClose: true,
            yes: function (index, layero) {
                var iframe = jquery(layero).find('iframe')[0];
                var $form = jquery(iframe.contentWindow.document).find('form');
                jquery.post($form.attr('action'), $form.serialize(), function (res) {
                    table.reload('tbl', {
                        page: {
                            curr: 1,
                        }
                    });
                    layer.close(index);
                });
            }
        })

    }

    function Toedit(id) {
        var index = layer.open({
            type: 2,
            title: "修改车",
            content: "car/update/" + id,
            btn: ['修改', '取消'],
            area: ['500px', '300px'],//弹窗的长宽 默认auto时 maxWidth - 最大宽度 maxHeight - 最大高度3
            yes: function (index, layero) {
                var iframe = jquery(layero).find('iframe')[0];
                var $form = jquery(iframe.contentWindow.document).find('form');
                jquery.post($form.attr('action'), $form.serialize(), function (res) {
                    table.reload('tbl', {
                        page: {
                            curr: 1
                        }
                    });
                    layer.close(index);
                })
            }
        });

    }

    function Todel() {
        var layer;
        layui.use('layer', function () {
            layer = layui.layer;
        })
        var checkStatus = table.checkStatus('tbl');
        if (checkStatus.data.length == 0) {
            layer.msg("至少选中一行来删除");
        }

        var params = {};
        for (var index in checkStatus.data) {
            params['ids[' + index + ']'] = checkStatus.data[index].id;
        }
        jquery.ajax({
            url: "car/del",
            method: "post",
            contentType: "application/x-www-form-urlencoded",
            data: params,
            success: function (res) {
                if (res.msg == "success") {
                    if (res.msg == "success") {
                        table.reload('tbl');
                    }
                }
            }
        })

    }

    function Todelete(id) {
        alert(id);
        var index = layer.confirm('是否确认删除', {
            btn: ['确认', '取消']
        }, function (index, layero) {
            alert("确认删除");
            jquery.post('car/delete/' + id, function (res) {
                if (res.msg) {
                    table.reload('tbl', {
                        page: {
                            curr: 1
                        }
                    });
                    layer.close(index);
                } else {
                    layero.msg("删除失败");
                }
            });
        }, function (index) {
            alert("取消删除");
        })
    }
</script>
</body>
</html>
